<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: #f00;
            width: 200px;


        }

        .a {
            width: 300px;
        }

        #b {
            color: aquamarine;
        }

        /* 1    10 */
        body div {
            color: pink;
        }

        .a {
            color: blue;
        }

        div {
            color: brown !important;
        }

        * {
            color: #ff0;
        }
    </style>
</head>

<body>


    <!-- 
        权重(优先级)：当同一个盒子的属性重复出现的时候，会发生冲突  哪一个属性会生效？
        同一种选择器的时候，后面的覆盖前面的


        *    通配符选择器          0000   不是无意义，只是权重比较低
        #    id选择器             0100
        .    类选择器             0010
        div  标签选择器           0001
        .a p 后代选择器           求和
        !important               1000


     -->

    <div class="a" id="b">div</div>

</body>

</html>